<template>
  <section>
    <ul class="d-flex flex-wrap-wrap">
      <router-link tag="li" :to="'/books/reader/' + books.bookId + '/' + getChapterId(books)" class="li" v-for="books in booksList" :key="books.id">
        <div class="cover">
          <img v-lazy="books.booksVo.booksCover" alt />
        </div>
        <h2>{{books.booksVo.booksName}}</h2>
      </router-link>
      <!--预留推荐和广告的位置-->
      <router-link
        tag="li"
        to="/books/shop"
        class="li add d-flex justify-content-center align-items-center"
      >
        <i class="iconfont icon-Addbookshelf"></i>
      </router-link>
    </ul>
  </section>
</template>

<script>
export default {
  name: "BooksList",
  props: {
    booksList: Array
  },
  data() {
    return {};
  },
  methods: {
    getChapterId (books) {
      return books.historyVo == undefined || books.historyVo.readChapterId == undefined 
        ? books.chapterId 
        : books.historyVo.readChapterId
    }
  }
};
</script>

<style lang="stylus" scoped>

ul {
  padding: 2vw;

  .li {
    height: 43vw;
    flex: 0 0 28vw;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-right: 6vw;
    margin-bottom 15px


    &:nth-child(3n) {
      margin-right: 0;
    }

    &.add {
      i {
        font-size: 30px !important;
        color: #21212194;
      }
    }

    .cover {
      width: 28vw;
      height: 36vw;

      img {
        width: 100%;
        height: 100%;
      }
    }

    h2 {
      font-size: 14px;
      line-height: 24px;
      text-indent: 4px;
      ellipsis()
    }
  }
}
</style>
